<template>
	<div>
		<el-dialog v-model="props.dialogVisible" title="分享记录" width="1000" @close="closeShare" align-center>
			<el-form class="el_form" :inline="true">
				<el-form-item label="团长手机号：" prop="leaderPhone">
					<el-input v-model="form.leaderPhone" placeholder="输入团长手机号"></el-input>
				</el-form-item>
				<el-form-item label="团员手机号：" prop="memberPhone">
					<el-input v-model="form.memberPhone" placeholder="输入团员手机号"></el-input>
				</el-form-item>
				<el-form-item label="">
					<el-button type="primary" @click="search">查询</el-button>
					<el-button @click="resetForm">重置</el-button>
					<el-button type="primary" @click="settlement(multipleSelection, 1)">批量结算</el-button>
				</el-form-item>
			</el-form>
			<el-table v-loading="tableLoading" :data="tableData.data" style="font-size: 12px"
				:cell-style="{ padding: '8px' }" border @selection-change="handleSelectionChange">
				<el-table-column type="selection" :selectable="selectable" width="55" />
				<el-table-column prop="leaderPhone" label="团长手机号" align="center" />
				<el-table-column prop="memberPhone" label="被分享人手机号" align="center" />
				<el-table-column prop="cleared" label="是否已结算团长分红" align="center">
					<template v-slot="scope">
						<el-tag type="success" v-if="scope.row.cleared">是</el-tag>
						<el-tag type="danger" v-else>否</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="分享时间" align="center" />
				<el-table-column label="操作" align="center">
					<template v-slot="scope">
						<el-popconfirm title="是否已结算?" @confirm="settlement(scope.row, 0)">
							<template #reference>
								<el-button type="text" size="small">结算</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background style="float: right; margin-top: 10px; margin-right: 30px"
				layout="prev, pager, next, jumper, ->, total" :page-size="tableData.size" :total="tableData.total"
				@current-change="currentChange" />
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="closeShare">关闭</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted, watch } from 'vue'
import { getShare, setShareClear } from '/@/api/api'
import TableComponents from '/@/components/tableComponents/index.vue';
import { ElMessage } from 'element-plus';
const selectable = (row) => !row.cleared;
const multipleSelection = ref([]);
const emits = defineEmits(['close'])
const props = defineProps({
	// 列表内容
	dialogVisible: {
		type: Boolean,
		default: () => false,
	},
});
const tableLoading = ref(false);
const form = reactive({
	leaderPhone: '',
	memberPhone: '',
})
const tableData = reactive({
	data: [],
	page: 1,
	size: 10,
	total: 0
})
watch(() => props.dialogVisible, (newValue) => {
	if (newValue) {
		getTableData();
	} else {
		tableData.page = 1;
	}
})
function getTableData() {
	tableLoading.value = true;
	const params = {
		current: tableData.page,
		size: tableData.size,
		status: 1,
		...form
	}
	getShare(params).then((res: any) => {
		if (res.code == 200) {
			tableData.data = res.data.records;
			tableData.total = res.data.total;
			tableLoading.value = false;
			multipleSelection.value = [];
		}
	})
}
function search() {
	tableData.page = 1;
	getTableData()
}
function resetForm() {
	form.leaderPhone = '';
	form.memberPhone = '';
	search();
}
function closeShare() {
	tableData.page = 1;
	tableData.size = 10;
	emits('close');
}
function settlement(row, type) {
	let params;
	if (type == 0) {
		params = {
			id: [row.id]
		}
	} else {
		if (row.length == 0) {
			ElMessage.error('请选择需要结算的分享记录！');
			return;
		}
		params = {
			id: row.map(item => item.id)
		};
	}
	setShareClear(params).then((res: any) => {
		if (res.code == 200) {
			ElMessage({
				message: '结算成功！',
				type: 'success',
			});
			getTableData()
		}
	})
}
function currentChange(val) {
	tableData.page = val;
	getTableData();
}
const handleSelectionChange = (val) => {
	multipleSelection.value = val
}
</script>
<style lang='scss' scoped>
.el-table .warning-row {
	background: #fff;
}

.el-table .success-row {
	background: #f7fbff;
}
</style>